<template>
  <div class="billPageHeadComponent" v-if="oItem">
    <div class="style1" v-if="oItem.main.style===1" :style="{backgroundColor:oItem.main.bgColor,backgroundImage:'url('+oItem.main.bgImg+')'}">
      <div class="head">
        <button class="on" :style="{color:oItem.main.titleFontColor}">
          <span>时间</span>
          <i class="iconfont icon-xiaoyuanjiaojiangxu"></i>
        </button>
        <button :style="{color:oItem.main.titleFontColor}">
          <span>项目</span>
          <i class="iconfont icon-xiaoyuanjiaojiangxu"></i>
        </button>
        <button :style="{color:oItem.main.titleFontColor}">
          <span>资金</span>
          <i class="iconfont icon-xiaoyuanjiaojiangxu"></i>
        </button>
      </div>
      <div class="body" :style="{color:oItem.main.titleFontColor}">
        <p class="tit">总收入(元)</p>
        <p class="num">888,533.54</p>
      </div>
      <div class="foot" :style="{color:oItem.main.contentFontColor}">
        <p>
          <span class="tit">佣金收入(元)</span>
          <span class="num">52.3</span>
        </p>
        <p>
          <span class="tit">分润收入(元)</span>
          <span class="num">52.3</span>
        </p>
        <p>
          <span class="tit">其他收入(元)</span>
          <span class="num">52.3</span>
        </p>
      </div>
    </div>
    <div class="style2" v-if="oItem.main.style===2" :style="{backgroundColor:oItem.main.bgColor,backgroundImage:'url('+oItem.main.bgImg+')'}">
      <div class="head">
        <button class="on" :style="{color:oItem.main.titleFontColor}">
          <span>时间</span>
          <i class="iconfont icon-xiaoyuanjiaojiangxu"></i>
        </button>
        <button :style="{color:oItem.main.titleFontColor}">
          <span>项目</span>
          <i class="iconfont icon-xiaoyuanjiaojiangxu"></i>
        </button>
        <button :style="{color:oItem.main.titleFontColor}">
          <span>资金</span>
          <i class="iconfont icon-xiaoyuanjiaojiangxu"></i>
        </button>
      </div>
      <div class="body" :style="{color:oItem.main.titleFontColor}">
        <p class="tit">总收入(元)</p>
        <p class="num">888,533.54</p>
      </div>
      <div class="foot" :style="{color:oItem.main.contentFontColor}">
        <p>
          <span>佣金收入(元)</span>
          <span>52.3</span>
        </p>
        <p>
          <span>分润收入(元)</span>
          <span>52.3</span>
        </p>
        <p>
          <span>其他收入(元)</span>
          <span>52.3</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "billPageHeadComponent",
  data() {
    return {
      oItem: null,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      // //console.log("进入init");
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.billPageHeadComponent {
  display: flex;
  .style1 {
    margin: 10px;
    flex: 1;
    color: #fff;
    border-radius: 15px;
    display: flex;
    background-color: #4f6ef2;
    flex-direction: column;
    box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee, -3px -3px 3px #eee;
    .head {
      padding: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      button {
        background-color: transparent;
        border: none;
        font-size: 16px;
        color: #fff;
        opacity: 0.5;
        font-weight: normal;
        &.on {
          opacity: 1;
        }
      }
    }
    .body {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px 0;
      font-weight: normal;
      .tit {
        opacity: 0.5;
        margin-bottom: 10px;
      }
      .num {
        font-size: 24px;
      }
    }
    .foot {
      display: flex;
      justify-content: space-between;
      padding: 15px 0 15px 0;
      p {
        font-size: 14px;
        align-items: center;
        display: flex;
        flex-direction: column;
        flex: 1;
        .tit {
          opacity: 0.5;
          margin-bottom: 5px;
        }
      }
    }
  }
  .style2 {
    margin: 10px;
    flex: 1;
    color: #fff;
    border-radius: 15px;
    display: flex;
    background-color: #4f6ef2;
    flex-direction: column;
    box-shadow: 3px 3px 3px #eee, -3px 3px 3px #eee, 3px -3px 3px #eee, -3px -3px 3px #eee;
    .head {
      padding: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      button {
        background-color: transparent;
        border: none;
        font-size: 16px;
        color: #fff;
        opacity: 0.5;
        font-weight: normal;
        &.on {
          opacity: 1;
        }
      }
    }
    .body {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px 0;
      font-weight: normal;
      .tit {
        display: flex;
        justify-content: center;
        flex: 1;
        opacity: 0.5;
        margin-bottom: 10px;
      }
      .num {
        display: flex;
        justify-content: center;
        flex: 1;
        font-size: 24px;
      }
    }
    .foot {
      display: flex; flex-direction: column;
      padding: 15px; opacity: 0.5;
      p {line-height: 30px;
        font-size: 14px;
        align-items: center;
        display: flex;
        justify-content: space-between;
        flex: 1;
        .tit {
          opacity: 0.5;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>
